<template>
    <div class="login-container">
      <h2>系统登录</h2>
      <form @submit.prevent="handleLogin">
        <div class="form-group">
          <label for="username">用户名</label>
          <input id="username" v-model="form.username" type="text" placeholder="请输入用户名" required>
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input id="password" type="password" placeholder="请输入密码" required>
        </div>
        <div class="form-group">
          <label for="role">选择身份</label>
          <select id="role" v-model="form.role" required>
            <option value="" disabled>请选择身份</option>
            <option value="student">学生</option>
            <option value="teacher">老师</option>
            <option value="admin">管理员</option>
          </select>
        </div>
        <button type="submit" class="login-btn">登录</button>
      </form>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { reactive, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { useUserStore } from '../stores/useUser'
  
  const userStore = useUserStore()
  const router = useRouter()
  
  //通过useUserStore()将用户登录信息存储在store中
  const form = reactive({
    username: '',
    role: ''
  })
  
  
  function handleLogin() {
    //将用户信息通过Pinia存储在本地存储
    userStore.setUserInfo(form)
  
    // 模拟登录成功，在实际项目中，这里应该是调用API进行登录验证，并处理登录成功或失败的情况，成功才进行路由跳转
  
    // 登录成功后跳转到首页
    router.push('/')
  }
  
  </script>
  
  <style scoped>
  .login-container {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 50px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  label {
    display: block;
    margin-bottom: 5px;
  }
  
  input,
  select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
  }
  
  .login-btn {
    width: 100%;
    padding: 10px;
    background-color: #42b983;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  </style>